<template>
  <h2>这是一个HelloWorld子组件</h2>
  <p>接收到父组件传递过来的数据:{{ msg }}=={{ $attrs.school }}</p>
  <button @click="sendData">给父组件传值</button>
  <slot></slot>
  <slot name="footer"></slot>
</template>

<script>
export default {
  name: "HelloWorld",
  // props: ["msg", "school"],
  // 可以通过props来接受父组件传来的数据,也可以直接在差值表达式中使用$attrs来直接使用
  // methods: {
  //   fn() {
  //     this.msg
  //   },
  // },
  // 使用emits来接受一下自定义事件
  // emits: ["hha"], // 使用emits属性来接收一下自定义的事件
  setup(props, context) {
    // console.log(a, b)
    // // a就是传过来的数据
    // // b里面有一个attrs中,也有传来的数据
    // console.log(b.attrs)
    // 必须在上面使用porps来接收,才能在setup函数中使用
    console.log(props.msg, props.school)
    // 如果没有使用props来接收参数,那么可以使用context,也就是setup中的第二个参数来拿到props数据
    // 注意: 两者只能选一个, 如果使用props接收了, 只能用props, 来设置
    // 如果没有接收就用centext来设置,因为props有,context中就获取不到传来的参数

    console.log(context)
    function sendData() {
      context.emit("hha", 213)
    }
    return {
      sendData,
    }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
